<template>
	<div class="container">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
		<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<!--		  <el-tab-pane label="C50天津中药配方颗粒" name="C50天津中药配方颗粒">-->
<!--			 -->
<!--			 	<el-row :gutter="16">-->
<!--			 		<el-col :span="12">-->
<!--			 		  <div class="container">-->
<!--			 			  <h3 style="margin-bottom: 20px">打印设置</h3>-->
<!--			 			  <div>-->
<!--		-->
<!--								 <el-form-item v-for="(item,index) in content2" :key="index" v-dragging="{ list: content2, item: item, group: 'content2' }">-->
<!--								  <el-input v-model.trim="item.name" style="width: 89px" maxlength="4"></el-input>-->
<!--								  &nbsp;&nbsp;-->
<!--								 <span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>-->
<!--								  <span v-if="item.type == '规格'?true:false">100克<el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input>2100克</span>-->
<!--								  <span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>-->
<!--								  <el-button v-show="item.type == ''" @click="deleteitem($event,index)" style="margin-left:30px;">删除</el-button>-->
<!--								</el-form-item>-->
<!--							<el-form-item label-width="100px">-->
<!--								<el-button @click="additem">添加一条</el-button>-->
<!--							</el-form-item>-->
<!--			 			  </div>-->
<!--			 		  </div>-->
<!--			 	  </el-col>-->
<!--			 	  <el-col :span="12">-->
<!--			 		  <div class="container">-->
<!--			 			  <h3 style="margin-bottom: 20px">打印预览(C50天津中药配方颗粒)</h3>-->
<!--			 			  <div class="container codeView codeViewC50" >-->
<!--								<div class="codeimg"><img src="../../../../assets/img/codeImg1.png" width="50%" /></div>-->
<!--			 				  &lt;!&ndash; <el-radio v-model="radioValue" label="1"></el-radio> &ndash;&gt;-->
<!--			 				  <h5>生地黄</h5>-->
<!--			 				  <div>-->
<!--			 					  <el-form :label-position="labelPosition" label-width="80px">-->
<!--			 						  <el-row>-->
<!--			 							  <el-form-item v-for="(item,index) in content2" :key="index" :label="item.name " >-->
<!--			 								  &nbsp;&nbsp;-->
<!--			 								  <span v-if="item.type != '规格'?true:false">{{item.details}}</span>-->
<!--			 								  <span v-if="item.type == '规格'?true:false">100克{{item.details}}2100克</span>-->
<!--			 								</el-form-item>-->
<!--			 						  </el-row>-->
<!--			 					  </el-form>-->
<!--			 				  </div>-->
<!--			 				  <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>-->
<!--			 				</div>-->
<!--			 			</div>-->
<!--			 		</el-col>-->
<!--			 	</el-row>-->
<!--			 &lt;!&ndash; </el-form> &ndash;&gt;-->
<!--		  </el-tab-pane>-->
<!--		  <el-tab-pane label="C50中药配方颗粒" name="C50中药配方颗粒">-->
<!--			  &lt;!&ndash; <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> &ndash;&gt;-->
<!--			  	<el-row :gutter="16">-->
<!--			  		<el-col :span="12">-->
<!--			  		  <div class="container">-->
<!--			  			  <h3 style="margin-bottom: 20px">打印设置</h3>-->
<!--			  			  <div>-->
<!--							   &lt;!&ndash; <draggable v-model="content1"> &ndash;&gt;-->
<!--								 <el-form-item v-for="(item,index) in content1" :key="index"   v-dragging="{ list: content1, item: item, group: 'content1' }">-->
<!--								  <el-input v-model.trim="item.name" style="width: 89px" maxlength="4"></el-input>-->
<!--								  &nbsp;&nbsp;-->
<!--								  <span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>-->
<!--								  <span v-if="item.type == '规格'?true:false"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>2100g</span>-->
<!--								  <span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>-->
<!--								  <el-button v-show="item.type == ''" @click="deleteitem1($event,index)" style="margin-left:30px;">删除</el-button>-->
<!--								</el-form-item>-->
<!--								<el-form-item label-width="100px">-->
<!--									<el-button @click="additem1">添加一条</el-button>-->
<!--								</el-form-item>-->
<!--							 &lt;!&ndash; </draggable> &ndash;&gt;-->
<!--			  			  </div>-->
<!--			  		  </div>-->
<!--			  	  </el-col>-->
<!--			  	  <el-col :span="12">-->
<!--			  		  <div class="container">-->
<!--			  			  <h3 style="margin-bottom: 20px">打印预览(C50中药配方颗粒)</h3>-->
<!--			  			  <div class="container codeView codeViewC50" >-->
<!--							  <div class="codeimg"><img src="../../../../assets/img/codeImg1.png" width="50%" /></div>-->
<!--			  				  &lt;!&ndash; <el-radio v-model="radioValue" label="1"></el-radio> &ndash;&gt;-->
<!--			  				  <h5>生地黄</h5>-->
<!--			  				  <div>-->
<!--								  -->
<!--			  					  <el-form :label-position="labelPosition" label-width="80px">-->
<!--			  						  <el-row>-->
<!--			  							  <el-form-item v-for="(item,index) in content1" :key="index" :label="item.name "  >-->
<!--			  								  &nbsp;&nbsp;-->
<!--			  								  &lt;!&ndash; {{item.details}} &ndash;&gt;-->
<!--											  <span v-if="item.type != '规格'?true:false">{{item.details}}</span>-->
<!--											  <span v-if="item.type == '规格'?true:false">{{item.detailone}}100g{{item.details}}2100g</span>-->
<!--			  								</el-form-item>-->
<!--			  						  </el-row>-->
<!--			  					  </el-form>-->
<!--			  				  </div>-->
<!--			  				  <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>-->
<!--			  				</div>-->
<!--			  			</div>-->
<!--			  		</el-col>-->
<!--			  	</el-row>-->
<!--			  &lt;!&ndash; </el-form> &ndash;&gt;-->
<!--		  </el-tab-pane>-->
<!--		  <el-tab-pane label="C20中药配方颗粒" name="C20中药配方颗粒">-->
<!--				<el-row :gutter="16">-->
<!--					<el-col :span="12">-->
<!--					  <div class="container">-->
<!--						  <h3 style="margin-bottom: 20px">打印设置</h3>-->
<!--						  <div>-->
<!--								 <el-form-item v-for="(item,index) in content" :key="index"  v-dragging="{ list: content, item: item, group: 'content' }">-->
<!--								  <el-input v-model.trim="item.name" style="width: 89px" maxlength="4"></el-input>-->
<!--								  &nbsp;&nbsp;-->
<!--								  <span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>-->
<!--								  <span v-if="item.type == '规格'?true:false"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100克<el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input>2100克</span>-->
<!--								  <span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>-->
<!--								  <el-button v-show="item.type == ''" @click="deleteitem2($event,index)" style="margin-left:30px;">删除</el-button>-->
<!--								</el-form-item>-->
<!--								<el-form-item label-width="100px">-->
<!--									<el-button @click="additem2">添加一条</el-button>-->
<!--								</el-form-item>-->
<!--						  </div>-->
<!--					  </div>-->
<!--				  </el-col>-->
<!--				  <el-col :span="12">-->
<!--					  <div class="container">-->
<!--						  <h3 style="margin-bottom: 20px">打印预览(C20中药配方颗粒)</h3>-->
<!--						  <div class="container codeView" >-->
<!--							  &lt;!&ndash; <el-radio v-model="radioValue" label="1"></el-radio> &ndash;&gt;-->
<!--							  <h5>生地黄</h5>-->
<!--							  <div>-->
<!--								  <el-form :label-position="labelPosition" label-width="80px">-->
<!--									  <el-row>-->
<!--										  <el-form-item v-for="(item,index) in content" :key="index" :label="item.name " >-->
<!--											  &nbsp;&nbsp;-->
<!--											  <span v-if="item.type != '规格'?true:false">{{item.details}}</span>-->
<!--											  <span v-if="item.type == '规格'?true:false">{{item.detailone}}100克{{item.details}}2100克</span>-->
<!--											</el-form-item>-->
<!--									  </el-row>-->
<!--								  </el-form>-->
<!--							  </div>-->
<!--							  <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</el-col>-->
<!--				</el-row>-->
<!--		  </el-tab-pane>-->
<!--		  -->
<!--		  <el-tab-pane label="C20连袋中药配方颗粒" name="C20连袋中药配方颗粒">-->
<!--			<el-row :gutter="16">-->
<!--				<el-col :span="12">-->
<!--				  <div class="container">-->
<!--					  <h3 style="margin-bottom: 20px">打印设置</h3>-->
<!--					  <div>-->
<!--							 <el-form-item v-for="(item,index) in content3" :key="index"  v-dragging="{ list: content3, item: item, group: 'content3' }">-->
<!--							  <el-input v-model.trim="item.name" style="width: 89px" maxlength="4"></el-input>-->
<!--							  &nbsp;&nbsp;-->
<!--							  <span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>-->
<!--							  <span v-if="item.type == '规格'?true:false"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100克<el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input>2100克</span>-->
<!--							  <span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>-->
<!--							  <el-button v-show="item.type == ''" @click="deleteitem3($event,index)" style="margin-left:30px;">删除</el-button>-->
<!--							</el-form-item>-->
<!--							<el-form-item label-width="100px">-->
<!--								<el-button @click="additem3">添加一条</el-button>-->
<!--							</el-form-item>-->
<!--					  </div>-->
<!--				  </div>-->
<!--			  </el-col>-->
<!--			  <el-col :span="12">-->
<!--				  <div class="container">-->
<!--					  <h3 style="margin-bottom: 20px">打印预览(C20连袋中药配方颗粒)</h3>-->
<!--					  <div class="container codeView" >-->
<!--						  &lt;!&ndash; <el-radio v-model="radioValue" label="1"></el-radio> &ndash;&gt;-->
<!--						  <h5>生地黄</h5>-->
<!--						  <div>-->
<!--							  <el-form :label-position="labelPosition" label-width="80px">-->
<!--								  <el-row>-->
<!--									  <el-form-item v-for="(item,index) in content3" :key="index" :label="item.name " >-->
<!--										  &nbsp;&nbsp;-->
<!--										  <span v-if="item.type != '规格'?true:false">{{item.details}}</span>-->
<!--										  <span v-if="item.type == '规格'?true:false">{{item.detailone}}100克{{item.details}}2100克</span>-->
<!--										</el-form-item>-->
<!--								  </el-row>-->
<!--							  </el-form>-->
<!--						  </div>-->
<!--						  <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</el-col>-->
<!--			</el-row>-->
<!--		  </el-tab-pane>-->
<!--		  -->
<!--		  -->
<!--		  <el-tab-pane label="C51中药配方颗粒" name="C51中药配方颗粒">-->
<!--		  			  &lt;!&ndash; <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> &ndash;&gt;-->
<!--		  			  	<el-row :gutter="16">-->
<!--		  			  		<el-col :span="12">-->
<!--		  			  		  <div class="container">-->
<!--		  			  			  <h3 style="margin-bottom: 20px">打印设置</h3>-->
<!--		  			  			  <div>-->
<!--		  							   &lt;!&ndash; <draggable v-model="content1"> &ndash;&gt;-->
<!--		  								 <el-form-item v-for="(item,index) in content4" :key="index"   v-dragging="{ list: content4, item: item, group: 'content4' }">-->
<!--		  								  <el-input v-model.trim="item.name" style="width: 89px" maxlength="4"></el-input>-->
<!--		  								  &nbsp;&nbsp;-->
<!--		  								  <span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>-->
<!--		  								  <span v-if="item.type == '规格'?true:false"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>2100g</span>-->
<!--		  								  <span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>-->
<!--		  								  <el-button v-show="item.type == ''" @click="deleteitem4($event,index)" style="margin-left:30px;">删除</el-button>-->
<!--		  								</el-form-item>-->
<!--		  								<el-form-item label-width="100px">-->
<!--		  									<el-button @click="additem4">添加一条</el-button>-->
<!--		  								</el-form-item>-->
<!--		  							 &lt;!&ndash; </draggable> &ndash;&gt;-->
<!--		  			  			  </div>-->
<!--		  			  		  </div>-->
<!--		  			  	  </el-col>-->
<!--		  			  	  <el-col :span="12">-->
<!--		  			  		  <div class="container">-->
<!--		  			  			  <h3 style="margin-bottom: 20px">打印预览(C51中药配方颗粒)</h3>-->
<!--		  			  			  <div class="container codeView codeViewC50" >-->
<!--		  							  <div class="codeimg"><img src="../../../../assets/img/codeImg1.png" width="50%" /></div>-->
<!--		  			  				  &lt;!&ndash; <el-radio v-model="radioValue" label="1"></el-radio> &ndash;&gt;-->
<!--		  			  				  <h5>生地黄</h5>-->
<!--		  			  				  <div>-->
<!--		  								  -->
<!--		  			  					  <el-form :label-position="labelPosition" label-width="80px">-->
<!--		  			  						  <el-row>-->
<!--		  			  							  <el-form-item v-for="(item,index) in content4" :key="index" :label="item.name "  >-->
<!--		  			  								  &nbsp;&nbsp;-->
<!--		  			  								  &lt;!&ndash; {{item.details}} &ndash;&gt;-->
<!--		  											  <span v-if="item.type != '规格'?true:false">{{item.details}}</span>-->
<!--		  											  <span v-if="item.type == '规格'?true:false">{{item.detailone}}100g{{item.details}}2100g</span>-->
<!--		  			  								</el-form-item>-->
<!--		  			  						  </el-row>-->
<!--		  			  					  </el-form>-->
<!--		  			  				  </div>-->
<!--		  			  				  <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>-->
<!--		  			  				</div>-->
<!--		  			  			</div>-->
<!--		  			  		</el-col>-->
<!--		  			  	</el-row>-->
<!--		  			  &lt;!&ndash; </el-form> &ndash;&gt;-->
<!--		  </el-tab-pane>-->



<!--		  <el-tab-pane label="C60中药配方颗粒" name="C60中药配方颗粒">-->
<!--			&lt;!&ndash; <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> &ndash;&gt;-->
<!--				<el-row :gutter="16">-->
<!--					<el-col :span="12">-->
<!--					  <div class="container">-->
<!--						  <h3 style="margin-bottom: 20px">打印设置</h3>-->
<!--						  <div>-->
<!--							 &lt;!&ndash; <draggable v-model="content1"> &ndash;&gt;-->
<!--							   <el-form-item v-for="(item,index) in content5" :key="index"   v-dragging="{ list: content5, item: item, group: 'content5' }">-->
<!--								<el-input v-model.trim="item.name" style="width: 89px" maxlength="4"></el-input>-->
<!--								&nbsp;&nbsp;-->
<!--								<span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>-->
<!--								<span v-if="item.type == '规格'?true:false"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>2100g</span>-->
<!--								<span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>-->
<!--								<el-button v-show="item.type == ''" @click="deleteitem5($event,index)" style="margin-left:30px;">删除</el-button>-->
<!--							  </el-form-item>-->
<!--							  <el-form-item label-width="100px">-->
<!--								  <el-button @click="additem5">添加一条</el-button>-->
<!--							  </el-form-item>-->
<!--						   &lt;!&ndash; </draggable> &ndash;&gt;-->
<!--						  </div>-->
<!--					  </div>-->
<!--				  </el-col>-->
<!--				  <el-col :span="12">-->
<!--					  <div class="container">-->
<!--						  <h3 style="margin-bottom: 20px">打印预览(C60中药配方颗粒)</h3>-->
<!--						  <div class="container codeView codeViewC50" >-->
<!--							&lt;!&ndash; <div class="codeimg"><img src="../../../../assets/img/codeImg1.png" width="50%" /></div> &ndash;&gt;-->
<!--							  &lt;!&ndash; <el-radio v-model="radioValue" label="1"></el-radio> &ndash;&gt;-->
<!--							  <h5>生地黄</h5>-->
<!--							  <div>-->
<!--								-->
<!--								  <el-form :label-position="labelPosition" label-width="80px">-->
<!--									  <el-row>-->
<!--										  <el-form-item v-for="(item,index) in content5" :key="index" :label="item.name "  >-->
<!--											  &nbsp;&nbsp;-->
<!--											  &lt;!&ndash; {{item.details}} &ndash;&gt;-->
<!--											<span v-if="item.type != '规格'?true:false">{{item.details}}</span>-->
<!--											<span v-if="item.type == '规格'?true:false">{{item.detailone}}100g{{item.details}}2100g</span>-->
<!--											</el-form-item>-->
<!--									  </el-row>-->
<!--								  </el-form>-->
<!--							  </div>-->
<!--							  <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</el-col>-->
<!--				</el-row>-->
<!--			&lt;!&ndash; </el-form> &ndash;&gt;-->
<!--</el-tab-pane>-->
<!--		  -->

<!--<el-tab-pane label="C70中药配方颗粒" name="C70中药配方颗粒">-->
<!--	&lt;!&ndash; <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> &ndash;&gt;-->
<!--		<el-row :gutter="16">-->
<!--			<el-col :span="12">-->
<!--			  <div class="container">-->
<!--				  <h3 style="margin-bottom: 20px">打印设置</h3>-->
<!--				  <div>-->
<!--					 &lt;!&ndash; <draggable v-model="content1"> &ndash;&gt;-->
<!--					   <el-form-item v-for="(item,index) in content6" :key="index"   v-dragging="{ list: content6, item: item, group: 'content6' }">-->
<!--						<el-input v-model.trim="item.name" style="width: 89px" maxlength="4"></el-input>-->
<!--						&nbsp;&nbsp;-->
<!--						<span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>-->
<!--						<span v-if="item.type == '规格'?true:false"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>2100g</span>-->
<!--						<span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>-->
<!--						<el-button v-show="item.type == ''" @click="deleteitem6($event,index)" style="margin-left:30px;">删除</el-button>-->
<!--					  </el-form-item>-->
<!--					  <el-form-item label-width="100px">-->
<!--						  <el-button @click="additem6">添加一条</el-button>-->
<!--					  </el-form-item>-->
<!--				   &lt;!&ndash; </draggable> &ndash;&gt;-->
<!--				  </div>-->
<!--			  </div>-->
<!--		  </el-col>-->
<!--		  <el-col :span="12">-->
<!--			  <div class="container">-->
<!--				  <h3 style="margin-bottom: 20px">打印预览(C70中药配方颗粒)</h3>-->
<!--				  <div class="container codeView codeViewC50" >-->
<!--					<div class="codeimg"><img src="../../../../assets/img/codeImg1.png" width="50%" /></div>-->
<!--					  &lt;!&ndash; <el-radio v-model="radioValue" label="1"></el-radio> &ndash;&gt;-->
<!--					  <h5>生地黄</h5>-->
<!--					  <div>-->
<!--						-->
<!--						  <el-form :label-position="labelPosition" label-width="80px">-->
<!--							  <el-row>-->
<!--								  <el-form-item v-for="(item,index) in content6" :key="index" :label="item.name "  >-->
<!--									  &nbsp;&nbsp;-->
<!--									  &lt;!&ndash; {{item.details}} &ndash;&gt;-->
<!--									<span v-if="item.type != '规格'?true:false">{{item.details}}</span>-->
<!--									<span v-if="item.type == '规格'?true:false">{{item.detailone}}100g{{item.details}}2100g</span>-->
<!--									</el-form-item>-->
<!--							  </el-row>-->
<!--						  </el-form>-->
<!--					  </div>-->
<!--					  <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>-->
<!--					</div>-->
<!--				</div>-->
<!--			</el-col>-->
<!--		</el-row>-->
<!--	&lt;!&ndash; </el-form> &ndash;&gt;-->
<!--</el-tab-pane>-->


<el-tab-pane label="C80中药配方颗粒" name="C80中药配方颗粒">
	<!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> -->
		<el-row :gutter="16">
			<el-col :span="12">
			  <div class="container">
				  <h3 style="margin-bottom: 20px">打印设置</h3>
				  <div>
					 <!-- <draggable v-model="content1"> -->
					   <el-form-item v-for="(item,index) in content8" :key="index"   v-dragging="{ list: content8, item: item, group: 'content8' }">
						<el-input v-model.trim="item.name" style="width: 170px"></el-input>
						&nbsp;&nbsp;
						<span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>
						<span v-if="item.type == '规格'?true:false" v-show="type == 'c50tj'">100克<el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input>2100克</span>
						<span v-if="item.type == '规格'?true:false" v-show="type != 'c50tj' && type != 'c60pt' && type != 'c70pt'"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>2100g</span>
						<span v-if="item.type == '规格'?true:false" v-show="type == 'c60pt' || type == 'c70pt'"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>1g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>3.3g</span>
						<span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>
						<el-button v-show="item.type == ''" @click="deleteitem8($event,index)" style="margin-left:30px;">删除</el-button>
					  </el-form-item>
					  <el-form-item label-width="100px">
						  <el-button @click="additem8">添加一条</el-button>
					  </el-form-item>
				   <!-- </draggable> -->
				  </div>
			  </div>
		  </el-col>
		  <el-col :span="12">
			  <div class="container">
				  <h3 style="margin-bottom: 20px">打印预览(C80中药配方颗粒)</h3>
				  <div class="container codeView codeViewC50" >
					<div class="codeimg"><img src="../../../../assets/img/codeImg1.png" width="50%" /></div>
					  <!-- <el-radio v-model="radioValue" label="1"></el-radio> -->
					  <h5>生地黄</h5>
					  <div>

						  <el-form :label-position="labelPosition" label-width="80px">
							  <el-row>
								  <el-form-item v-for="(item,index) in content8" :key="index" :label="item.name "  >
									  &nbsp;&nbsp;
									 <span v-if="item.type != '规格'?true:false">{{item.details}}</span>
									 <span v-if="item.type == '规格'?true:false" v-show="type == 'c50tj'">100克{{item.details}}2100克</span>
									 <span v-if="item.type == '规格'?true:false" v-show="type != 'c50tj'">{{item.detailone}}100g{{item.details}}2100g</span>
									</el-form-item>
							  </el-row>
						  </el-form>
					  </div>
					  <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>
					</div>
				</div>
			</el-col>
		</el-row>
	<!-- </el-form> -->
</el-tab-pane>


<el-tab-pane label="C90中药配方颗粒" name="C90中药配方颗粒">
	<!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> -->
		<el-row :gutter="16">
			<el-col :span="12">
			  <div class="container">
				  <h3 style="margin-bottom: 20px">打印设置</h3>
				  <div>
					 <!-- <draggable v-model="content1"> -->
					   <el-form-item v-for="(item,index) in content9" :key="index"   v-dragging="{ list: content9, item: item, group: 'content9' }">
						<el-input v-model.trim="item.name" style="width: 170px"></el-input>
						&nbsp;&nbsp;
						<span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>
						<span v-if="item.type == '规格'?true:false" v-show="type == 'c50tj'">100克<el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input>2100克</span>
						<span v-if="item.type == '规格'?true:false" v-show="type != 'c50tj' && type != 'c60pt' && type != 'c70pt'"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>2100g</span>
						<span v-if="item.type == '规格'?true:false" v-show="type == 'c60pt' || type == 'c70pt'"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>1g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>3.3g</span>
						<span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>
						<el-button v-show="item.type == ''" @click="deleteitem9($event,index)" style="margin-left:30px;">删除</el-button>
					  </el-form-item>
					  <el-form-item label-width="100px">
						  <el-button @click="additem9">添加一条</el-button>
					  </el-form-item>
				   <!-- </draggable> -->
				  </div>
			  </div>
		  </el-col>
		  <el-col :span="12">
			  <div class="container">
				  <h3 style="margin-bottom: 20px">打印预览(C90中药配方颗粒)</h3>
				  <div class="container codeView codeViewC50" >
					<div class="codeimg"><img src="../../../../assets/img/codeImg1.png" width="50%" /></div>
					  <!-- <el-radio v-model="radioValue" label="1"></el-radio> -->
					  <h5>生地黄</h5>
					  <div>

						  <el-form :label-position="labelPosition" label-width="80px">
							  <el-row>
								  <el-form-item v-for="(item,index) in content9" :key="index" :label="item.name "  >
									  &nbsp;&nbsp;
									<span v-if="item.type != '规格'?true:false">{{item.details}}</span>
									<span v-if="item.type == '规格'?true:false" v-show="type == 'c50tj'">100克{{item.details}}2100克</span>
									<span v-if="item.type == '规格'?true:false" v-show="type != 'c50tj'">{{item.detailone}}100g{{item.details}}2100g</span>
									</el-form-item>
							  </el-row>
						  </el-form>
					  </div>
					  <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>
					</div>
				</div>
			</el-col>
		</el-row>
	<!-- </el-form> -->
</el-tab-pane>



		</el-tabs>
		<el-form-item class="footerFixed">
		    <el-button type="primary" @click="submitRules('ruleForm')" v-if="added">提交</el-button>
		</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {template_save,template_get} from "@/request/api"
	import draggable from 'vuedraggable'
	export default {
		components: { draggable },
		data(){
			return{
				added:true,
				sort:[],
				activeName:'C80中药配方颗粒',
				ruleForm:{},
				rules:{

				},
				labelPosition:"right",
				content:[
					{name:'产品批号',details:'1710007',type:'批号',},
					{name:'装量',details:'相当于饮片',type:'规格'},
					{name:'生产日期',details:'2020.08.07',type:'生产日期'},
					{name:'有效期至',details:"35个月",type:'有效期至'}
				],
				content1:[
					{name:'装量',details:"相当于饮片",type:'规格',detailone:'每袋装'},
					{name:'批号',details:"19040009",type:'批号',detailone:''},
					{name:'生产日期',details:"2019.03.19",type:'生产日期',detailone:''},
					{name:'有效期至',details:"35个月",type:'有效期至',detailone:''}
				],
				content2:[
					{name:'批号',details:"19040021",type:'批号',detailone:''},
					{name:'临床当量',details:"配方颗粒相当于临床使用饮片量",type:'规格',detailone:'每袋装'},
					{name:'生产日期',details:"2019.03.19",type:'生产日期',detailone:''},
					{name:'有效期至',details:"35个月",type:'有效期至',detailone:''},
					{name:'',details:"每袋装100g",type:'包装规格',detailone:''},
				],
				content3:[
					{name:'产品批号',details:'1710007',type:'批号',detailone:''},
					{name:'',details:'相当于饮片',type:'规格',detailone:'每袋装'},
					{name:'生产日期',details:'2020.08.07',type:'生产日期',detailone:''},
					{name:'有效期至',details:"35个月",type:'有效期至',detailone:''}
				],
				content4:[
					{name:'装量',details:"相当于饮片",type:'规格',detailone:'每袋装'},
					{name:'批号',details:"19040009",type:'批号',detailone:''},
					{name:'生产日期',details:"2019.03.19",type:'生产日期',detailone:''},
					{name:'有效期至',details:"35个月",type:'有效期至',detailone:''}
				],
				content5:[
					{name:'装量',details:"相当于饮片",type:'规格',detailone:'每袋装'},
					{name:'批号',details:"19040009",type:'批号',detailone:''},
					{name:'生产日期',details:"2019.03.19",type:'生产日期',detailone:''},
					{name:'有效期至',details:"35个月",type:'有效期至',detailone:''},
					{name:'储存条件',details:"2022.02",type:'储存条件',detailone:''},
				],
				content6:[
					{name:'装量',details:"相当于饮片",type:'规格',detailone:'每袋装'},
					{name:'批号',details:"19040009",type:'批号',detailone:''},
					{name:'生产日期',details:"2019.03.19",type:'生产日期',detailone:''},
					{name:'有效期至',details:"35个月",type:'有效期至',detailone:''},
					{name:'储存条件',details:"2022.02",type:'储存条件',detailone:''},
				],
				content8:[
					{name:'装量',details:"相当于饮片",type:'规格',detailone:'每袋装'},
					{name:'批号',details:"19040009",type:'批号',detailone:''},
					{name:'生产日期',details:"2019.03.19",type:'生产日期',detailone:''},
					{name:'有效期至',details:"35个月",type:'有效期至',detailone:''},
					{name:'储存条件',details:"2022.02",type:'储存条件',detailone:''},
				],
				content9:[
					{name:'装量',details:"相当于饮片",type:'规格',detailone:'每袋装'},
					{name:'批号',details:"19040009",type:'批号',detailone:''},
					{name:'生产日期',details:"2019.03.19",type:'生产日期',detailone:''},
					{name:'有效期至',details:"35个月",type:'有效期至',detailone:''},
					{name:'储存条件',details:"2022.02",type:'储存条件',detailone:''},
				],
				id:'',
				data1:'',
				data2:'',
				data:'',
				type:''
			}
		},
		created(){
			var data = JSON.stringify(this.$store.state.dymb)
			var a = "编辑"
			if(data.indexOf(a) != -1){
			    this.added = true
			}else{
			    this.added = false
			}
		},
		mounted(){
			this.init8()
			this.$dragging.$on('dragged', (value) => {
			　　　　//因为我这在排序的时候不需要做处理，所以空着就行
			})
		},
		methods:{

			 change (evt) {

		  },
			      //start ,end ,add,update, sort, remove 得到的都差不多
		  start (evt) {

		  },
			  end (evt) {

				  evt.item //可以知道拖动的本身
				  evt.to    // 可以知道拖动的目标列表
				  evt.from  // 可以知道之前的列表
				  evt.oldIndex  // 可以知道拖动前的位置
				  evt.newIndex  // 可以知道拖动后的位置
			  },
			  move (evt, originalEvent) {


			  },


			deleteitem(event,index){

				this.content2.splice(index,1)
			},
			deleteitem1(event,index){

				this.content1.splice(index,1)
			},
			deleteitem2(event,index){

				this.content.splice(index,1)
			},
			deleteitem3(event,index){

				this.content3.splice(index,1)
			},
			deleteitem4(event,index){

				this.content4.splice(index,1)
			},
			deleteitem5(event,index){

					this.content5.splice(index,1)
				},
				deleteitem6(event,index){

					this.content6.splice(index,1)
				},
				deleteitem8(event,index){

					this.content8.splice(index,1)
				},
				deleteitem9(event,index){

					this.content9.splice(index,1)
				},
			handleClick(tab,event){
				var type = tab.label

				if(type == "C50天津中药配方颗粒"){
					this.id = ""
					this.init()
				} else if(type == "C50中药配方颗粒"){
					this.id = ""
					this.init1()
				}else if (type == "C20中药配方颗粒"){
					this.id = ""
					this.init2()
				}else if (type == "C20连袋中药配方颗粒"){
					this.id = ""
					this.init3()
				}else if (type == "C51中药配方颗粒"){
					this.id = ""
					this.init4()
				}else if (type == "C60中药配方颗粒"){
					this.id = ""
					this.init5()
				}else if (type == "C70中药配方颗粒"){
					this.id = ""
					this.init6()
				}else if (type == "C80中药配方颗粒"){
					this.id = ""
					this.init8()
				}else if (type == "C90中药配方颗粒"){
					this.id = ""
					this.init9()
				}
			},
			init(){
				let data = "?type=c50tj&isNew=2"
				template_get(data).then((res)=>{
					if(res.data != null){
						this.id = res.data.id
						this.content2 = JSON.parse(res.data.content)
						for (var i = 0; i < this.content2.length; i++) {
							if(this.content2[i].type == "批号"){
								this.content2[i].details = "19040021"
							}
							if(this.content2[i].type == "生产日期"){
								this.content2[i].details = "2019.03.19"
							}
							if(this.content2[i].type == "有效期至"){
								this.content2[i].details = "2022.02"
							}
							if(this.content2[i].type == "包装规格"){
								this.content2[i].details = "每袋装100克"
							}
						}
					}else{
						this.id=""
					}

				})
			},
			init1(){
				let data = "?type=c50pt&isNew=2"
				template_get(data).then((res)=>{
					if(res.data != null){
						this.id = res.data.id
						this.content1 = JSON.parse(res.data.content)
						for (var i = 0; i < this.content1.length; i++) {
							if(this.content1[i].type == "批号"){
								this.content1[i].details = "19040021"
							}
							if(this.content1[i].type == "生产日期"){
								this.content1[i].details = "2019.03.19"
							}
							if(this.content1[i].type == "有效期至"){
								this.content1[i].details = "2022.02"
							}

						}
					}else{
						this.id=""
					}

				})
			},
			init2(){
				let data = "?type=c20pt&isNew=2"
				template_get(data).then((res)=>{
					if(res.data != null){
						this.id = res.data.id
						this.content = JSON.parse(res.data.content)
						for (var i = 0; i < this.content.length; i++) {
							if(this.content[i].type == "批号"){
								this.content[i].details = "19040021"
							}
							if(this.content[i].type == "生产日期"){
								this.content[i].details = "2019.03.19"
							}
							if(this.content[i].type == "有效期至"){
								this.content[i].details = "2022.02"
							}

						}
					}else{
						this.id=""
					}

				})
			},
			init4(){
				let data = "?type=c51pt&isNew=2"
				template_get(data).then((res)=>{
					if(res.data != null){
						this.id = res.data.id
						this.content4 = JSON.parse(res.data.content)
						for (var i = 0; i < this.content1.length; i++) {
							if(this.content1[i].type == "批号"){
								this.content1[i].details = "190255649"
							}
							if(this.content1[i].type == "生产日期"){
								this.content1[i].details = "2019.04.20"
							}
							if(this.content1[i].type == "有效期至"){
								this.content1[i].details = "2022.33"
							}

						}
					}else{
						this.id=""
					}

				})
			},
			init3(){
				let data = "?type=c20ld&isNew=2"
				template_get(data).then((res)=>{
					if(res.data != null){
						this.id = res.data.id
						this.content3 = JSON.parse(res.data.content)
						for (var i = 0; i < this.content3.length; i++) {
							if(this.content3[i].type == "批号"){
								this.content3[i].details = "19040021"
							}
							if(this.content3[i].type == "生产日期"){
								this.content3[i].details = "2019.03.19"
							}
							if(this.content3[i].type == "有效期至"){
								this.content3[i].details = "2022.02"
							}

						}
					}else{
						this.id=""
					}


				})
			},
			init5(){
				let data = "?type=c60pt&isNew=2"
				template_get(data).then((res)=>{
					if(res.data != null){
						this.id = res.data.id
						this.content5 = JSON.parse(res.data.content)
						for (var i = 0; i < this.content5.length; i++) {
							if(this.content5[i].type == "批号"){
								this.content5[i].details = "19040021"
							}
							if(this.content5[i].type == "生产日期"){
								this.content5[i].details = "2019.03.19"
							}
							if(this.content5[i].type == "有效期至"){
								this.content5[i].details = "2022.02"
							}

						}
					}else{
						this.id=""
					}


				})
			},
			init6(){
				let data = "?type=c70pt&isNew=2"
				template_get(data).then((res)=>{
					if(res.data != null){
						this.id = res.data.id
						this.content6 = JSON.parse(res.data.content)
						for (var i = 0; i < this.content6.length; i++) {
							if(this.content6[i].type == "批号"){
								this.content6[i].details = "19040021"
							}
							if(this.content6[i].type == "生产日期"){
								this.content6[i].details = "2019.03.19"
							}
							if(this.content6[i].type == "有效期至"){
								this.content6[i].details = "2022.02"
							}

						}
					}else{
						this.id=""
					}


				})
			},
			init8(){
				let data = "?type=c80pt&isNew=2"
				template_get(data).then((res)=>{
					if(res.data != null){
						this.id = res.data.id
						this.type = res.data.type
						this.content8 = JSON.parse(res.data.content)
						for (var i = 0; i < this.content8.length; i++) {
							if(this.content8[i].type == "批号"){
							    this.content8[i].details = "19040021"
							}
							if(this.content8[i].type == "生产日期"){
							    this.content8[i].details = "2019.03.19"
							}
							if(this.content8[i].type == "有效期至"){
							    this.content8[i].details = "35个月"
							}
							if(this.content8[i].type == "包装规格"){
							    this.content8[i].details = "每袋装100克"
							}

						}
					}else{
						this.id=""
					}


				})
			},
			init9(){
				let data = "?type=c90pt&isNew=2"
				template_get(data).then((res)=>{
					if(res.data != null){
						this.id = res.data.id
						this.type = res.data.type
						this.content9 = JSON.parse(res.data.content)
						for (var i = 0; i < this.content9.length; i++) {
							if(this.content9[i].type == "批号"){
							    this.content9[i].details = "19040021"
							}
							if(this.content9[i].type == "生产日期"){
							    this.content9[i].details = "2019.03.19"
							}
							if(this.content9[i].type == "有效期至"){
							    this.content9[i].details = "35个月"
							}
							if(this.content9[i].type == "包装规格"){
							    this.content9[i].details = "每袋装100克"
							}

						}
					}else{
						this.id=""
					}


				})
			},
			additem(){
				this.content2.push({name:'限制四字',details:'自定义输入内容',type:''})
			},
			additem4(){
				this.content4.push({name:'限制四字',details:'自定义输入内容',type:''})
			},
			additem1(){
				this.content1.push({name:'限制四字',details:'自定义输入内容',type:''})
			},
			additem2(){
				this.content.push({name:'限制四字',details:'自定义输入内容',type:''})
			},
			additem3(){
				this.content3.push({name:'限制四字',details:'自定义输入内容',type:''})
			},
			additem5(){
				this.content5.push({name:'限制四字',details:'自定义输入内容',type:''})
			},
			additem6(){
				this.content6.push({name:'限制四字',details:'自定义输入内容',type:''})
			},
			additem8(){
				this.content8.push({name:'限制四字',details:'自定义输入内容',type:''})
			},
			additem9(){
				this.content9.push({name:'限制四字',details:'自定义输入内容',type:''})
			},
			submitRules(){
				if(this.activeName == "C50天津中药配方颗粒"){
					for(var i=0;i<this.content2.length;i++){
						if(this.content2[i].type != "规格"){
							// this.content2[i].details = ""
						}
					}
					var arr = JSON.stringify(this.content2)


					let data = {
						content:arr,
						type:"c50tj",
						id:this.id,
						isNew:2,
						templateName:"C50天津中药配方颗粒"
					}
					this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
					    confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						template_save(data).then((res)=>{
							this.$notify({
								title:'提示',
								message:'修改成功',
								type:"success"
							})
							this.init()
						})
					})
				}
				if(this.activeName == "C50中药配方颗粒"){
					var arr1 = JSON.stringify(this.content1)
					let data = {
						content:arr1,
						type:"c50pt",
						id:this.id,
						isNew:2,
						templateName:"C50中药配方颗粒"
					}
					this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
					    confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						template_save(data).then((res)=>{
							this.$notify({
								title:'提示',
								message:'修改成功',
								type:"success"
							})
							this.init1()
						})
					})

				}
				if(this.activeName == "C20中药配方颗粒"){
					var arr2 = JSON.stringify(this.content)
					let data = {
						content:arr2,
						type:"c20pt",
						id:this.id,
						isNew:2,
						templateName:"C20中药配方颗粒"
					}
					this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
					    confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						template_save(data).then((res)=>{
							this.$notify({
								title:'提示',
								message:'修改成功',
								type:"success"
							})
							this.init2()
						})
					})

				}
				if(this.activeName == "C20连袋中药配方颗粒"){
					var arr3 = JSON.stringify(this.content3)
					let data = {
						content:arr3,
						type:"c20ld",
						id:this.id,
						isNew:2,
						templateName:"C20连袋中药配方颗粒"
					}
					this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
					    confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						template_save(data).then((res)=>{
							this.$notify({
								title:'提示',
								message:'修改成功',
								type:"success"
							})
							this.init3()
						})
					})

				}
				if(this.activeName == "C51中药配方颗粒"){

					var arr4 = JSON.stringify(this.content4)
					let data = {
						content:arr4,
						type:"c51pt",
						id:this.id,
						isNew:2,
						templateName:"C51中药配方颗粒"
					}

					this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
					    confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						template_save(data).then((res)=>{
							this.$notify({
								title:'提示',
								message:'修改成功',
								type:"success"
							})
							this.init4()
						})
					})

				}
				if(this.activeName == "C60中药配方颗粒"){

					var arr5 = JSON.stringify(this.content5)
					let data = {
						content:arr5,
						type:"c60pt",
						id:this.id,
						isNew:2,
						templateName:"C60中药配方颗粒"
					}

					this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
					    confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						template_save(data).then((res)=>{
							this.$notify({
								title:'提示',
								message:'修改成功',
								type:"success"
							})
							this.init5()
						})
					})

				}
				if(this.activeName == "C70中药配方颗粒"){

					var arr6 = JSON.stringify(this.content6)
					let data = {
						content:arr6,
						type:"c70pt",
						id:this.id,
						isNew:2,
						templateName:"C70中药配方颗粒"
					}

					this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
					    confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						template_save(data).then((res)=>{
							this.$notify({
								title:'提示',
								message:'修改成功',
								type:"success"
							})
							this.init6()
						})
					})

				}
				if(this.activeName == "C80中药配方颗粒"){

					var arr8 = JSON.stringify(this.content8)
					let data = {
						content:arr8,
						type:"c80pt",
						id:this.id,
						isNew:2,
						templateName:"C80中药配方颗粒"
					}

					this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
					    confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						template_save(data).then((res)=>{
							this.$notify({
								title:'提示',
								message:'修改成功',
								type:"success"
							})
							this.init6()
						})
					})

				}
				if(this.activeName == "C90中药配方颗粒"){

					var arr9 = JSON.stringify(this.content9)
					let data = {
						content:arr9,
						type:"c90pt",
						id:this.id,
						isNew:2,
						templateName:"C90中药配方颗粒"
					}

					this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
					    confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						template_save(data).then((res)=>{
							this.$notify({
								title:'提示',
								message:'修改成功',
								type:"success"
							})
							this.init6()
						})
					})

				}
			}
		}
	}
</script>

<style lang="less" scoped>
.el-pagination{
    text-align: center;
}
.el-radio__input.is-checked+.el-radio__label{
    display: none;
}
.codeView{
    position: relative;
    padding-left: 30px;
    .el-radio{
        position: absolute;
        left: 0;
        top: 30%;
        .el-radio__label{
            display: none;
        }
    }
    h5{ font-size: 18px; color: #303133; margin-bottom: 10px;}
    .el-form-item{ margin-bottom: 0;}
    .img{ position: absolute; right: 0px; bottom: 10px;}
}
.codeViewC50{
    padding: 10px 20px;
    .el-radio{
        position: absolute;
        left: -22px;
        top: 50%;
        .el-radio__label{
            display: none;
        }
    }
    p{
        // width: 218px;
        text-align: center;
        display: inline-block;
    }
    h5{
        display: block;
        width: 245px;
        text-align: center;
    }
}
</style>
